<template>
     <div class="login-container">
    <!-- 头部的 logo 区域 -->
    <div class="header">
      <img src="../assets/images/logo.png" alt="" />
    </div>

    <!-- 登录和注册区域 -->
    <div class="box">
      <div class="box-header"></div>
      <!-- 登录的表单 -->

      <!-- 使用element-ui组件库中form表单做校验
      form组件需要绑定 ：model属性
      每一个input需要设置v-model
      每一个input所在的FormItem必须设置prop属性
      form组件需要绑定:rules属性 -->
      <el-form ref="form" :model="form" :rules="rules">
  <el-form-item prop="username">
    <el-input prefix-icon="el-icon-s-custom" v-model="form.username" placeholder="请输入用户名"></el-input>
  </el-form-item>
  
  <el-form-item prop="password">
    <el-input prefix-icon="el-icon-lock" v-model="form.password" placeholder="请输入密码"></el-input>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" class="btn-login" @click="login">登录</el-button>
    
  </el-form-item>
    <el-link type="info" @click="$router.push('/reg')">去注册</el-link>
  </el-form>
    </div>
  </div>
</template>

<script>
import { reqLogin } from '../api/user'
// import request from '../utils/request'
export default{
    data(){
        return{
            //表单关联的数据对象
            form:{
                username:'',
                password:''
            },
            //表单校验规则
            rules:{
                username:[
                    { required: true, message: '请输入用户名', trigger: ['blur','change'] },
                    // { min: 3, max: 5, message: '用户名长度在 3 到 5 个字符', trigger: ['blur','change'] }
                    { pattern:/^[0-9a-zA-Z]{1,10}$/, message: '用户名要求数字+字母1-10个字符', trigger: ['blur','change'] }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: ['blur','change'] },
                    // { min: 6, max: 10, message: '密码长度在 3 到 5 个字符', trigger: ['blur','change'] }
                    { pattern:/^\S{6,15}$/, message: '密码必须6-15个非空字符', trigger: ['blur','change'] }
                ]
            }
        }
    },
    methods:{
        //登录方法
        login(){
            //表单预校验工作 validate 表单校验的方法 参数1是一个布尔值 未通过返回false 通过返回true
            this.$refs.form.validate(async boo=>{
                console.log(boo)
                if(!boo) return console.log('校验未通过')
                //开启loading
            //  const loading=this.$loading({
            //  lock: true, //加载期间禁止页面滚动
            //  text: 'Loading', //加载的提示文本
            //  spinner: 'el-icon-loading', //加载loading的图标
            //  background: 'rgba(0, 0, 0, 0.7)' //加载的背景色
        // })
                //发送axios请求
               const {data}=await reqLogin(this.form)
                    console.log(data)
                    
                   
                       if (data.code !== 0) {
                    return this.$message.error('登录失败！')
        }
        // 登录成功，提示用户，保存 token，跳转到后台主页
                this.$message.success('登录成功')
                localStorage.setItem('token', data.token)
                
                //跳转到/首页
                this.$router.push('/')
                //关闭loading
                // loading.close()
            })

        }
    }
}
</script>
<style lang="less" scoped>
.login-container {
  background-color: blue;
  height: 100%;
  background: url('~@/assets/images/login_bg.jpg') no-repeat center;
  background-size: cover;

  .header {
    width: 1200px;
    margin: 0 auto;
    user-select: none;
  }

  .box {
    width: 400px;
    height: 270px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.2);
    padding: 0 30px;
    box-sizing: border-box;

    .box-header {
      height: 60px;
      background: url('~@/assets/images/login_title.png') no-repeat center;
    }

    .btn-login {
      width: 100%;
    }

    .link-reg {
      font-size: 12px;
    }
  }
}
</style>